import React, {useState, useEffect} from "react";
import {
    // Divider, 
    Input, Select, DatePicker, Button, notification} from "antd";
import moment from "moment";
// import City from "../../../../components/City"
import City from "../../../../components/City1"
import City1 from "../../../../components/City2"
import http from "../../../../request";

const { Option } = Select;
const { TextArea } = Input;

const Tab1 = (props) => {
    const {id, setId, close, refresh, change} = props;
    const [form, setForm] = useState({});
    const [show, setShow] = useState(!1)
    useEffect(() => {
        !id && setShow(!0)
        id && detail()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    return (
        show && (
            <div className="container">
                {/* <div className="part-title">基本信息</div> */}
                <div className="u-flex">
                    <div className="label">城市城区</div>
                    <City value={[form.city, form.region, form.area]} onChange={cityChange} className="u-m-l-20"/>
                    <div className="label u-m-l-20">地铁</div>
                    <Select placeholder="地铁" onChange={e => formChange('metro', e)} value={form.metro} className="u-m-l-38" style={{width: 435}}>
                        <Option value="1号线">1号线</Option>
                        <Option value="2号线">2号线</Option>
                        <Option value="3号线">3号线</Option>
                        <Option value="4号线">4号线</Option>
                        <Option value="5号线">5号线</Option>
                        <Option value="6号线">6号线</Option>
                        <Option value="其他">其他</Option>
                    </Select>
                </div>
                <div className="u-flex u-m-t-5">
                    <div className="label">所属片区</div>
                    <City1 value={[form.city, form.region, form.area]} onChange={cityChange} className="u-m-l-10"/>
                    <div className="label u-m-l-20">环线</div>
                    <Select placeholder="环线" onChange={e => formChange('loop_line', e)} value={form.loop_line} className="u-m-l-38" style={{width: 435}}>
                        <Option value="1环内">1环内</Option>
                        <Option value="1-2环">1-2环</Option>
                        <Option value="2-3环">2-3环</Option>
                        <Option value="4环外">4环外</Option>
                        <Option value="其他">其他</Option>
                    </Select>
                </div>
                <div className="u-flex u-m-t-5">
                    <div className="label">楼盘名字</div>
                    <Input placeholder="楼盘名字" onChange={e => formChange('name', e.target.value)} value={form.name} className="u-m-l-20 " style={{width: 450}} />
                    <div className="label u-m-l-10">物业用途</div>
                    <Select placeholder="物业用途" onChange={e => formChange('property_use', e)} value={form.property_use} className="u-m-l-20" style={{width: 435}}>
                        <Option value="住宅">住宅</Option>
                        <Option value="商住">商住</Option>
                        <Option value="商铺">商铺</Option>
                        <Option value="网点">网点</Option>
                        <Option value="写字楼">写字楼</Option>
                        <Option value="厂房">厂房</Option>
                        <Option value="写厂">写厂</Option>
                        <Option value="铺厂">铺厂</Option>
                        <Option value="仓库">仓库</Option>
                        <Option value="地皮">地皮</Option>
                        <Option value="车位">车位</Option>
                        <Option value="其他">其他</Option>
                    </Select>
                </div>
                <div className="u-flex u-m-t-5">
                    <div className="label">拼音缩写</div>
                    <Input placeholder="拼音缩写" onChange={e => formChange('pinyin', e.target.value)} value={form.pinyin} className="u-m-l-20" style={{width: 450}} />
                    <div className="label u-m-l-10">物业类型</div>
                    <Select placeholder="物业类型" onChange={e => formChange('property_type', e)} value={form.property_type} className="u-m-l-20" style={{width: 435}}>
                        <Option value="多层">多层</Option>
                        <Option value="高层">高层</Option>
                        <Option value="小高层">小高层</Option>
                        <Option value="多层复式">多层复式</Option>
                        <Option value="高层复式">高层复式</Option>
                        <Option value="多层跃式">多层跃式</Option>
                        <Option value="高层跃式">高层跃式</Option>
                        <Option value="独立别墅">独立别墅</Option>
                        <Option value="联体别墅">联体别墅</Option>
                        <Option value="双拼别墅">双拼别墅</Option>
                        <Option value="叠加别墅">叠加别墅</Option>
                        <Option value="围院别墅">围院别墅</Option>
                        <Option value="裙楼">裙楼</Option>
                        <Option value="四合院">四合院</Option>
                    </Select>
                </div>
                <div className="u-flex u-m-t-5">
                    <div className="label">(广告)别名</div>
                    <Input placeholder="(广告)别名" onChange={e => formChange('alias', e.target.value)} value={form.alias} className="u-m-l-12" style={{width: 450}} />
                    <div className="label u-m-l-10">建房/产权</div>
                    {
                        form.years ? (
                            <DatePicker picker="year" onChange={(date, dateString) => formChange('years', dateString)} value={moment(form.years)} placeholder="建年" className="u-m-l-14" style={{width: 212}} />
                        ) : (
                            <DatePicker picker="year" onChange={(date, dateString) => formChange('years', dateString)} placeholder="建年" className="u-m-l-10" style={{width: 212}} />
                        )
                    }
                    <Select placeholder="产权" onChange={e => formChange('property_right', e)} value={form.property_right} className="u-m-l-10" style={{width: 212}}>
                        <Option value="10年">10年</Option>
                        <Option value="20年">20年</Option>
                        <Option value="30年">30年</Option>
                        <Option value="40年">40年</Option>
                        <Option value="50年">50年</Option>
                        <Option value="60年">60年</Option>
                        <Option value="70年">70年</Option>
                    </Select>
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">概要地址</div>
                    <Input placeholder="概要地址" onChange={e => formChange('outline_address', e.target.value)} value={form.outline_address} className="u-m-l-20" style={{width: 970}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label ">详细地址</div>
                    <Input placeholder="详细地址" onChange={e => formChange('detailed_address', e.target.value)} value={form.detailed_address} className="u-m-l-20" style={{width: 970}} />
                </div>
                <div className="u-flex">
                    <div>
                        <div className="u-flex u-m-t-10">
                            <div className="label u-m-l-14">售均价</div>
                            <Input placeholder="0.00" onChange={e => formChange('avr_price', e.target.value)} value={form.avr_price} className="u-m-l-20" style={{width: 150}} />
                            <div className="label u-m-l-5">元</div>
                        </div>
                        <div className="u-flex u-m-t-10">
                            <div className="label u-m-l-14">管理费</div>
                            <Input placeholder="0.00" onChange={e => formChange('mgt_expense', e.target.value)} value={form.mgt_expense} className="u-m-l-20" style={{width: 150}} />
                            <div className="label u-m-l-5">元</div>
                        </div>
                        <div className="u-flex u-m-t-10">
                            <div className="label">政府指导价</div>
                            <Input placeholder="0.00" onChange={e => formChange('guidance_price', e.target.value)} value={form.guidance_price} className="u-m-l-5" style={{width: 150}} />
                            <div className="label u-m-l-5">元</div>
                        </div>
                    </div>
                    <div>
                        <div className="u-flex u-m-b-55 ">
                            <div className="label u-m-l-60">备注</div>
                            <TextArea placeholder="备注" onChange={e => formChange('memo', e.target.value)} value={form.memo} className="u-m-l-10" style={{width: 700}} />
                        </div>
                    </div>
                </div>
                {/* <Divider />
                <div className="part-title">详细信息</div>
                <div className="u-flex u-m-t-10">
                    <div className="label">建筑面积</div>
                    <Input placeholder="0.00" onChange={e => formChange('built_up_area', e.target.value)} value={form.built_up_area} className="u-m-l-10" style={{width: 80}} />
                    <div className="label u-m-l-5">㎡</div>
                    <div className="label u-m-l-20">结构</div>
                    <Select placeholder="结构" onChange={e => formChange('structure', e)} value={form.structure} className="u-m-l-10" style={{width: 100}}>
                        <Option value="砖木结构">砖木</Option>
                        <Option value="砖混结构">砖混</Option>
                        <Option value="钢筋混凝土结构">钢筋混凝土</Option>
                        <Option value="钢结构">钢</Option>
                    </Select>
                    <div className="label u-m-l-20">土地</div>
                    <Select placeholder="土地" onChange={e => formChange('land', e)} value={form.land} className="u-m-l-10" style={{width: 100}}>
                        <Option value="国有">国有</Option>
                        <Option value="集体">集体</Option>
                        <Option value="住宅">住宅</Option>
                        <Option value="工业">工业</Option>
                        <Option value="商业">商业</Option>
                        <Option value="国防">国防</Option>
                        <Option value="教育">教育</Option>
                        <Option value="公共事业">公共事业</Option>
                    </Select>
                    <div className="label u-m-l-34">物业主</div>
                    <Input placeholder="物业主" onChange={e => formChange('property_owner', e.target.value)} value={form.property_owner} className="u-m-l-10" style={{width: 100}} />
                    <div className="label u-m-l-20">英文名称</div>
                    <Input placeholder="英文名称" onChange={e => formChange('english_name', e.target.value)} value={form.english_name} className="u-m-l-10" style={{width: 100}} />
                    <div className="label u-m-l-20">电话1</div>
                    <Input placeholder="电话1" onChange={e => formChange('phone1', e.target.value)} value={form.phone1} className="u-m-l-10" style={{width: 120}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label u-m-l-14">总户数</div>
                    <Input placeholder="0.00" onChange={e => formChange('total_households', e.target.value)} value={form.total_households} className="u-m-l-10" style={{width: 80}} />
                    <div className="label u-m-l-38">外墙</div>
                    <Select placeholder="外墙" onChange={e => formChange('exterior_wall', e)} value={form.exterior_wall} className="u-m-l-10" style={{width: 100}}>
                        <Option value="涂料">涂料</Option>
                        <Option value="面砖">面砖</Option>
                        <Option value="石材">石材</Option>
                        <Option value="铝板">铝板</Option>
                        <Option value="玻璃幕墙">玻璃幕墙</Option>
                        <Option value="陶瓷薄板">陶瓷薄板</Option>
                    </Select>
                    <div className="label u-m-l-20">地号</div>
                    <Input placeholder="地号" onChange={e => formChange('land_number', e.target.value)} value={form.land_number} className="u-m-l-10" style={{width: 100}} />
                    <div className="label u-m-l-20">物业公司</div>
                    <Input placeholder="物业公司" onChange={e => formChange('property_company', e.target.value)} value={form.property_company} className="u-m-l-10" style={{width: 100}} />
                    <div className="label u-m-l-20">英文地址</div>
                    <Input placeholder="英文地址" onChange={e => formChange('english_address', e.target.value)} value={form.english_address} className="u-m-l-10" style={{width: 100}} />
                    <div className="label u-m-l-20">电话2</div>
                    <Input placeholder="电话2" onChange={e => formChange('phone2', e.target.value)} value={form.phone2} className="u-m-l-10" style={{width: 120}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">周边环境</div>
                    <TextArea placeholder="周边环境" onChange={e => formChange('environment', e.target.value)} value={form.environment} className="u-m-l-10" style={{width: 445, height: 70}} />
                    <div className="label u-m-l-20">学校教育</div>
                    <TextArea placeholder="学校教育" onChange={e => formChange('education', e.target.value)} value={form.education} className="u-m-l-10" style={{width: 440, height: 70}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">休闲娱乐</div>
                    <TextArea placeholder="休闲娱乐" onChange={e => formChange('recreation', e.target.value)} value={form.recreation} className="u-m-l-10" style={{width: 445, height: 70}} />
                    <div className="label u-m-l-20">交通设施</div>
                    <TextArea placeholder="交通设施" onChange={e => formChange('traffic', e.target.value)} value={form.traffic} className="u-m-l-10" style={{width: 440, height: 70}} />
                </div>
                <div className="u-flex u-m-t-10">
                    <div className="label">商业百货</div>
                    <TextArea placeholder="商业百货" onChange={e => formChange('business', e.target.value)} value={form.business} className="u-m-l-10" style={{width: 445, height: 70}} />
                </div>*/}
                <div className="u-flex u-row-center u-m-t-10">
                    <Button type="primary" onClick={update}>保存</Button>
                    <Button type="primary" ghost className="u-m-l-20" onClick={() => close(!1)}>取消</Button>
                </div> 
            </div>
        )
    )
    function detail(){
        http('estate.one', {
            ids: id
        }).then(res => {
            if(res.code === 1){
                setForm(res.data)
                setShow(!0)
            }
        })
    }
    function update(){
        let url = !id ? 'estate.add' : 'estate.edit'
        http(url, {
            row: form
        }).then(res => {
            if(res.code === 1){
                notification.success({
                    message: '提示',
                    description: res.msg || '操作成功'
                })
                change(!1)
                refresh()
                setId(res.data)
            } else {
                notification.error({
                    message: res.msg || '操作失败，请重试'
                })
            }
        })
    }
    function cityChange(
        city, 
        region, 
        area
    ){
        let newForm = JSON.parse(JSON.stringify(form))
        newForm.city = city
        newForm.region = region
        newForm.area = area
        setForm(newForm)
    }
    function formChange(name, value){
        let newForm = JSON.parse(JSON.stringify(form))
        newForm[name] = value
        setForm(newForm)
    }
}

export default Tab1